<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <!-- Dom操作 -->
    <script type="text/javascript">
        //加载页面的时候就执行方法
        window.onload = function () {
            var colors = ["red", "blue", "green"];
            var colorMeans = ["热情", "冷静", "生机"];
            //创建一个标签、节点
            var ul = document.createElement("ul");
            for (var k in colors) {
                //k是数组的下标
                // 遍历数组下标
                console.log(k);
                //每遍历一次，就创建一个li标签，并设置属性
                var li = document.createElement("li");
                li.setAttribute("mean", colorMeans[k]);
                //创建文本节点
                var txt = document.createTextNode(colors[k]);
                //添加子节点
                li.appendChild(txt);
                ul.appendChild(li);
            }
            //为整个页面添加子节点，ui在上面已经定义完毕
            document.body.appendChild(ul);

        }
    </script>
</body>

</html>